<template>
  <div>
      <a-form-item v-if="item.editorType == 'SELECT'" :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-select :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" :placeholder="item.hint" :dropdownMatchSelectWidth="false" :allowClear="true" :show-search="true"
           @change="doValueChanged($event, item)" v-decorator="[item.fieldName]" v-decorator.trim="[item.fieldName]">
          <a-select-option  v-for="(item,index) in getDictValues(item)" :key="item.valueCode" :value="item.valueCode">
            {{ item.valueName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'MULTI_SELECT'" :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-select :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" :placeholder="item.hint" mode="multiple" :dropdownMatchSelectWidth="false" allow-clear :show-search="true"
           @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]">
          <a-select-option  v-for="(sel,index) in getDictValues(item)" :key="sel.valueCode" :value="sel.valueCode">
            {{ sel.valueName }}
          </a-select-option>
        </a-select>
       </a-form-item>
      <a-form-item v-else-if="item.editorType == 'TREE'" :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-tree-select :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
           :treeData="orgaTree" :placeholder="item.hint"  @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]">
        </a-tree-select>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'TEXTAREA' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-textarea :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" :rows="2" :placeholder="item.hint" allow-clear  @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]"/>
      </a-form-item>
      <a-form-item v-else-if="item.dataType == 'BOOLEAN' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-radio-group :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'"  @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]">
           <a-radio value="" v-if="opType == 'search' ">全部</a-radio><a-radio :value="true">是</a-radio><a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'DIGIT' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-input-number :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" style="width: 100%" allow-clear @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]"></a-input-number>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'NUMBER' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-input-number :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" style="width: 100%" allow-clear @change="doValueChanged($event, item)" :precision="item.dataLength" :step="calcScale(item.dataScale)" string-mode v-decorator.trim="[item.fieldName]"></a-input-number>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'MOBILE' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-input-number :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" style="width: 100%" :min="11" :max="11" allow-clear @change="doValueChanged($event, item)" :precision="item.dataLength" :step="calcScale(item.dataScale)" string-mode v-decorator.trim="[item.fieldName]"></a-input-number>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'DATE' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-date-picker :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" locale="zh_CN" style="width: 100%" allow-clear @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]"></a-date-picker>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'TIME' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-time-picker :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" style="width: 100%" allow-clear @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]"></a-time-picker>
      </a-form-item>
      <a-form-item v-else-if="item.editorType == 'DATE_TIME' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-date-picker  :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" locale="zh_CN" style="width: 100%" show-time allow-clear @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]"></a-date-picker>               
      </a-form-item>
      <a-form-item v-else-if="item.fieldName == 'id' " :labelCol="labelCol" :class="item.required ? 'required':'' " :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-input  :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" :placeholder="item.hint" type="item.dataType" allow-clear :suffix="item.hint" @change="doValueChanged($event, item)" v-decorator.trim="['id']"/>
      </a-form-item>
      <a-form-item v-else :labelCol="labelCol" :class="item.required ? 'required':'' " :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
        <a-input  :readOnly="!isEditable(item)" :class="isEditable(item) ? '':'readOnly'" :placeholder="item.hint" type="item.dataType" allow-clear :suffix="item.hint" @change="doValueChanged($event, item)" v-decorator.trim="[item.fieldName]"/>
      </a-form-item>
  </div>
</template>

<script>
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction } from '@/api/manage'
  import {agileTemplate, addUser,editUser,queryOrganizationTreeList,roleAllList} from '@/api/api'
  import { disabledAuthFilter } from "@/utils/authFilter"
  import {duplicateCheck } from '@/api/api'
  import {autoJumpNextInput} from "@/utils/util"
  import JImageUpload from '../../../components/jeecg/JImageUpload'
  import JDate from '@/components/jeecg/JDate'
  import { JModalMixin } from '@/mixins/JModalMixin'
  export default {
    name: "FormEditor",
    mixins: [JModalMixin],
    components: {
      JImageUpload,
      JSelectPosition,
      JDate
    },
    props: {
      item: {
        type: Object,
        required: true
      },
      dictValues: {
        type: Object,
        required: false,
        default(){
          return {}
        }
      },
      initValue: {
        required:false,
        default (){
          return "aaa";
        }
      },
      opType: {
        type: String,
        required: false,
        default(){
          return "add"
        }
      },
      formModel: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      }
    },
    watch: {
      formModel: {
        handler(val){
          
        }
      }
    },
    created(){
      console.log("item:" + this.item)
    },
    methods: {
      doValueChanged(event,item){
        var v = event;
        if( typeof event == 'object'){
          v = this.formModel[item.fieldName] = event.currentTarget.value;
        }
        if(item.dataType == "DIGIT"){
          v = parseInt(v);
        }else if(item.dataType == "BOOLEAN"){
          if(v != ''){
            v = v == "true" || v == '1'
          }else{
            v = undefined
          }
        }
        this.formModel[item.fieldName] = v;
      },
      
      isEditable(column){
        const opType = this.opType;
        if(opType == 'add'){
          return column.insertable
        }else if(opType == 'edit'){
          return column.updateable
        }else if(opType == 'search'){
          return true;
        }
        return false
      }
    }
  }
</script>

<style>
  .readOnly, .readOnly > input{border: none;box-shadow: none;background-color: #f0f0f0;}
</style>
